<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="test1.css">
</head>

<body>
  <!-- <a href="https://www.baidu.com">百度</a>
  <a href="https://www.sina.com">新浪</a>
  <a href="https://www.douyu.com">斗鱼</a> -->

  <!-- <p>
    Lorem ipsum <span> dolor </span>sit amet consectetur adipisicing.
  </p> -->

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <div class="red">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur?</div>

  <!-- 精准选择 -->
  <div class="abc">
    <p></p>
    <p class="bcd">div元素中的p元素</p>
    <p></p>
  </div>

  <p class="bcd">
    单独p元素
  </p>

  <!-- 子元素选择 -->
  <div>
    <ul>
      <li>Lorem, ipsum.</li>
      <li>Error, dolores?</li>
      <li>Nulla, quis?</li>
    </ul>
  </div>


  <!-- 兄弟元素 -->
  <div>
    <ul>
      <li>Lorem, ipsum.</li>
      <li>Ducimus, at.</li>
      <li class="special">Tempora, sit!</li>
      <li>Omnis, corrupti!</li>
      <li>Earum, vero.</li>
      <li>Quisquam, aspernatur.</li>
    </ul>
  </div>


  <p>Lorem ipsum dolor sit amet.</p>
  <p>Fuga quibusdam excepturi eum accusantium.</p>
  <p>Ad debitis esse deleniti pariatur.</p>

</body>

</html>